<template>
	<view>
		<view>
			<u-swipe-action :show="item.show" :index="index" 
				v-for="(item, index) in info" :key="item.id" 
				@click="click(item.id)" @open="open"
				:options="options"
			>
				<view class="item u-border-bottom" @click="goDetail(item.id)">
					<!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
					<view class="title-wrap">
						<view class="wrap-left">
							<u-lazy-load :image="'https://adjyxw.h1668.com' + item.carImg"></u-lazy-load>
						</view>
						<view class="wrap-right">
							<text class="title-top u-line-2">{{ item.carnumberplate }}</text>
							<text class="title u-line-2">{{ item.contacts }}/{{ item.mobile }}</text>
							<text class="title u-line-2">{{ item.carcolor }}/{{ item.cartype }}</text>
						</view>
						
					</view>
				</view>
			</u-swipe-action>
		</view>
		<view class="addcart">
			<u-button type="primary" :custom-style="customStyle" shape="circle" :ripple="true" @click="goaddcart()">添加车辆</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userData: {},
				info: [],
				options: [
					// {
					// 	text: '修改',
					// 	style: {
					// 		backgroundColor: '#007aff'
					// 	}
					// },
					{
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
						}
					}
				],
				customStyle: {
					marginTop: '20px', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					color: 'white'
				}
			}
		},
		onLoad() {
			this.userData = uni.getStorageSync('userData')
			this.getcarlist()
		},
		onShow() {
			this.userData = uni.getStorageSync('userData')
		},
		methods: {
			click(id) {
				this.delCarpark(id)
			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.info[index].show = true;
				this.info.map((val, idx) => {
					if(index != idx) this.info[idx].show = false;
				})
			},
			goaddcart() {
				uni.navigateTo({
					url: '/pagesB/addcart/addcart'
				})
			},
			getcarlist() {
				uni.request({
					url: uni.getStorageSync('URL') + '/home/booking/Cardserver/carlist',
					method: 'POST',
					data: {
						userid: this.userData.id
					},
					header: {
						"X-Requested-With": "XMLHttpRequest"
					},
					dataType: 'json',
					success: (res) => {
						// console.log(res.data.data)
						this.info = res.data.data
					}
				})
			},
			goDetail(id) {
				uni.navigateTo({
					url: '/pagesB/cart_info/cartDetail?id=' +id
				})
			},
			delCarpark(id) {
				uni.request({
					url: uni.getStorageSync('URL') + '/home/carpark/Carpark/carparkDel',
					method: 'POST',
					data: {
						carparkId: id
					},
					header: {
						"X-Requested-With": "XMLHttpRequest"
					},
					dataType: 'json',
					success: (res) => {
						if(res.statusCode == 200) {
							setTimeout(() => {
								uni.showToast({
									icon: 'none',
									title: '删除成功',
								});
								setTimeout(() => {
									uni.hideToast();
									//关闭提示后跳转
									uni.reLaunch({
										url: '/pagesB/cart_info/cart_info'
									})
								}, 1500)
							}, 0);
						}
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.item {
		padding: 20rpx;
		.title-wrap {
			display: flex;
			width: 100%;
			.wrap-left {
				width: 40%;
				height: 100px;
				image {
					width: 100%;
					height: 100%;
					object-fit: contain;
				}
			}
			.wrap-right {
				width: 60%;
				.title, .title-top {
					text-align: center;
					font-size: 28rpx;
					color: $u-content-color;
					margin-top: 20rpx;
				}
				.title-top {
					font-size: 35rpx;
					color: black;
				}
			}
		}
	}
	
	.addcart {
		// position: fixed;
		bottom: 20rpx;
		margin: 0 auto;
		width: 50%;
	}
	
</style>
